<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="information-card">
                    <!-- 电站信息 -->
                    <div class="information_text">
                        <div class="information_title">电站信息</div>
                    </div>
                    <div class="information-info">
                        <div>电站名称:<span>聚贤科技产业园物业楼</span></div>
                        <div>电站类型:<span>工商业光伏</span></div>
                        <div>装机容量:<span>1600 kWp</span></div>
                        <div>并网日期:<span>2025-08-28</span></div>
                        <div>所在时区:<span>+08:00</span></div>
                        <div>电站地址:<span>湖北省孝感市孝南区孝感开发区孝天街道聚贤科技产业园</span></div>
                        <div>业主用户名:<span>高创光伏电站</span></div>
                        <div>渠道商:<span>---</span></div>
                        <div>联系电话:<span>13986485672</span></div>
                    </div>
                    <!-- 电价信息 -->
                    <div class="information_text">
                        <div class="information_title">电价信息</div>
                    </div>
                    <div class="information-info">
                        <div>暂未设置</div>
                    </div>
                    <!-- 关联账号 -->
                    <div class="information_text">
                        <div class="information_title">关联账号</div>
                    </div>
                    <div class="information-info">
                        <div>关联合作商:<span>高创光伏/高创光伏</span></div>
                        <div>业主用户名:<span>高创光伏电站</span></div>
                        <div>业主手机号:<span>13986485672</span></div>
                    </div>
                    <!-- 更多信息 -->
                    <div class="information_text">
                        <div class="information_title">更多信息</div>
                    </div>
                    <div class="information-info">
                        <div>并网类型:<span>自发自用余电上网</span></div>
                        <div>出资方式:<span>业主全款</span></div>
                        <div>并网日期:<span>2025-08-28</span></div>
                        <div>安装日期:<span>2025-08-28</span></div>
                        <div>发电户号:<span>---</span></div>
                        <div>组件数量:<span>---</span></div>
                        <div>方位角:<span>---</span></div>
                        <div>倾斜角:<span>---</span></div>
                        <div>备注:<span>---</span></div>
                    </div>
                </div>

            </el-col>
            <el-col :span="8">
                <div class="information-card">
                    <el-image :src="solarPanelImageUrl" class="solar-panel-image" />
                </div>
                <div class="information-card">
                    <MapContainer />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import MapContainer from '@/components/MapContainer'
export default {
    components: { MapContainer },
    data() {
        return {
            solarPanelImageUrl: require('@/assets/images/plantImg-default.jpeg'),
        }
    },
}
</script>

<style scoped lang="scss">
.information-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    // margin-top: 20px;
    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    justify-content: center;
    color: #666666;

    div {
        padding: 5px 0;
    }

    span {
        color: #000;
    }

    .solar-panel-image {
        width: 100%;
        height: 150px;
    }
}

.information-info {
    padding: 0 20px !important;
}

.information_text {
    display: flex;
    justify-content: space-between;

    .information_title {
        font-size: 20px;
        color: #000;
        font-weight: 700;
    }
}
</style>